<template>
    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field
            v-model="username"
            name="username"
            label="用户名"
            placeholder="请填写用户名"
            :rules="[{ validator: checkUsername, message: '请填写用户名' }]"
            />
            <van-field
            v-model="userAccount"
            name="userAccount"
            label="账号"
            placeholder="账号不少于4位，由字面和数字组成"
            :rules="[{ validator: checkAccount, message: '请正确填写账号' }]"
             />
            <van-field
            v-model="userPassword"
            type="password"
            name="userPassword"
            label="密码"
            placeholder="密码不小于8位"
            :rules="[{ validator: checkPasswordLength, message: '请正确填写密码' }]"
            />
            <van-field
            v-model="checkPassword"
            type="password"
            name="checkPassword"
            label="确认密码"
            placeholder="请再次填写密码"
            :rules="[{ validator: checkPasswordTrue, message: '请确认密码' }]"
            />
            <van-field
            v-model="userEmail"
            name="userEmail"
            label="邮箱"
            placeholder="请填写邮箱"
            :rules="[{ validator: checkEmail, message: '请正确填写邮箱' }]"
            />
            <van-field
            v-model="checkCode"
            name="checkCode"
            label="验证码"
            placeholder="请填写验证码"
            :rules="[{ validator: checkCodeLength, message: '请正确填写验证码' }]"
            >
            <template #right-icon>
                <CountdownButton @click="getEmailCode"/>
            </template>
            </van-field>
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
            注册
            </van-button>
        </div>

    </van-form>

</template>

<script setup lang="ts">
import myAxios from "../plugins/myAxios.ts";
import { showFailToast, showSuccessToast } from "vant/lib/vant.es";
import { ref } from 'vue';
import CountdownButton from '../layouts/CountdownButton.vue';
import { useRouter } from "vue-router";

const router = useRouter();

const username = ref("");
const userAccount = ref("");
const userPassword = ref("");
const checkPassword = ref("");
const userEmail = ref("");
const checkCode = ref("");

// 校验用户名是否为空
const checkUsername = () => {
    if (username.value.trim()) {
        return true;
    } else {
        return false;
    }
};

// 校验账号是否不少于4位，只由字母和数字组成
const checkAccount = () => {
  const regex = /^[0-9a-zA-Z]{4,}$/;
  return regex.test(userAccount.value);
};

// 校验密码长度不少于8位
const checkPasswordLength = () => {
  return userPassword.value.length >= 8;
};

// 确认密码
const checkPasswordTrue = () => {
    return (userPassword.value === checkPassword.value) && checkPassword.value != null
}

// 校验邮箱格式是否正确
const checkEmail = () => {
  const regex = /^[\w\.-]+@[a-zA-Z\d\.-]+\.[a-zA-Z]{2,}$/;
  return regex.test(userEmail.value);
};

// 邮箱验证码不为空
const checkCodeLength = () => {
    if (checkCode.value.trim()) {
        const regex = /^[0-9]{6,}$/;
        return regex.test(checkCode.value);
    } else {
        return false;
    }
}

// export default {
//   name: 'App',
//   components: {
//     CountdownButton,
//   },
// };

const getEmailCode = async () => {
  if (!checkEmail()){
    showFailToast("请填写邮箱");
    return;
  }
  const res = await myAxios.post('/common/code/request', {
    email:userEmail.value,
  })
  if (res.success && res.data) {
    const resCode = await myAxios.post('/common/code/email',{
        code:res.data.permissionCode,
        email:userEmail.value,
    })
    if (resCode.success && resCode.data) {
        showSuccessToast('发送成功！');
    } else {
        showFailToast('发送失败,'+res.message);
    }
  } else {
    showFailToast('发送失败,'+res.message);
  }
}

const onSubmit = async () => {
  // 在这里添加向后端发送请求的代码
  console.log("用户注册");
  const res = await myAxios.post("/user/register", {
    username: username.value,
    userAccount: userAccount.value,
    userPassword: userPassword.value,
    checkPassword: checkPassword.value,
    email: userEmail.value,
    checkCode: checkCode.value,
  });
  console.log(res, "用户注册");
  if (res.code === 0 && res.data !== null) {
    showSuccessToast("注册成功");
    // 跳转到登录页
    router.push({
      path: "/user/login",
    });
  } else {
    showFailToast("注册失败" + res.description);
  }
}

</script>

<style scoped>

</style>